<template>
  <div>
    <div> 全选：
      <input v-model="isAll" type="checkbox">
      <button @click="reverseFn">反选</button>
    </div>
    <ul>
      <!-- arr.forEach((item, index)=>{
      这里吗的item以及index和v-for中的item index是一样的，都是独立使用的
      }) -->
      <!-- 
        v-model双向绑定在复选框上的情况：
        情况一：当v-model绑定的变量为 数组 的时候，这个变量和复选框的value属性双向绑定在一起
        情况二：当v-model绑定的变量为“非数组”的时候，这个变量和复选框的checked属性双向绑定在一起
       -->
      <li v-for="(item,index) in arr" :key="index">
        <input v-model="item.c" type="checkbox"> <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: true,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    }
  },
  computed: {
    isAll: {
      set(bool){ // 可以理解为监控，用于监控用户的操作
        // console.log(bool)
        // bool即为获取到的用户设置的全选框的状态值
        // 那么我们只需要把这个状态值赋值给小选框的c属性即可
        this.arr.forEach(item=>{
          item.c = bool
        })
      },
      get(){
        let bool =  this.arr.every(item=>{
          return item.c === true
        })
        return bool
      }
    }
  },
  methods: {
    // 反选
    reverseFn(){
      this.arr.forEach(item=>{
        // !表示取反，也就是说当值为false的是取反变为true，当值为true的时候取反变为false
        item.c = !item.c
      })
    }
  }
}
</script>

<style>

</style>